/* --- CSS DU DIAPORAMA --- */
        :root {
            --slide-height: 250px; /* Hauteur des images sur ordinateur */
            --slide-gap: 16px;     /* Espace entre les images */
        }

        .w3-slide-container {
            overflow: hidden;       /* Cache les images qui sortent du cadre */
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        .w3-slide-track {
            display: flex;
            width: max-content;     /* Permet à la piste de s'étendre au-delà de 100% */
            animation: w3-scroll-rtl 40s linear infinite; /* Animation par défaut */
        }

        .w3-slide-img {
            height: var(--slide-height);
            width: auto;            /* Conserve les proportions */
            object-fit: cover;
            display: block;
            margin-right: var(--slide-gap); /* Espace entre les images (remplace gap) */
            flex-shrink: 0;         /* Empêche l'image d'être écrasée par flexbox */
        }

        /* Arrêt au survol */
        .w3-slide-container:hover .w3-slide-track {
            animation-play-state: paused;
        }

        /* Responsivité pour les téléphones */
        @media only screen and (max-width: 600px) {
            :root {
                --slide-height: 150px;
                --slide-gap: 8px;
            }
        }

        /* Animations de défilement */
        @keyframes w3-scroll-rtl {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* -50% car on duplique le contenu */
        }

        @keyframes w3-scroll-ltr {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }